<template>
	<div class="navbar-right-menu">
		<div class="navbar-top-menu">
			<eco-icon icon="icon-search" size="12px"></eco-icon>
			<div class="navbar-top-menu-name" title="信息门户">信息门户</div>
		</div>

		<div class="navbar-qucik-search">
			<div class="navbar-quick-search-types">
				<div class="navbar-quick-search-type">
					<span class="navbar-quick-search-types-name" title="查询合同">查询合同</span>
					<eco-icon icon="icon-search" size="12px"></eco-icon>
				</div>
			</div>
			<div class="navbar-quick-search-content">
				<input id="navbar-quick-search-input" class="navbar-quick-search-input" placeholder="请输入关键词搜索">
			</div>
			<eco-icon icon="icon-search" size="12px"></eco-icon>
		</div>
	</div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.navbar-right-menu {
	display: flex;
}

.navbar-top-menu {
	display: flex;
  	margin-right: 5px;
  	cursor: pointer;
}

.navbar-qucik-search {
	display: flex;
	line-height:var(--theme-header-height);
	background: rgba(0, 0, 0, 0.08);

	.navbar-quick-search-types {
		width: 60px;
  		cursor: pointer;
	}
}

.navbar-quick-search-type {
	display: flex;
}

.navbar-quick-search-types-name {
	display: block;
	width: 40px;
	padding-left: 5px;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	text-align: center;
}

.navbar-quick-search-types-icon{
	display: block;
	width: 18px;
}

.navbar-quick-search-input {
  width: 190px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-top-menu-icon {
  position: relative;
  width: 20px;
  height: var(--theme-header-height);
  margin: 0 5px 0 10px;
}
</style>
